<template>
  <view class="card y-flex" :class="{ choosed: choosed, 'staff-card': isNurseInfoPage }" @click="$emit('click')">
    <div class="staff-icon y-margin-right">
      <image class="image" :src="avatar" mode="widthFix"></image>
    </div>
    <view class="y-flex1">
      <view class="y-title">{{ info.name }}</view>
      <view class="y-color-detail y-margin-top-md">{{ sex }} {{ info.age }}岁 {{ workingYears }}</view>
      <view class="y-flex y-margin-top-md">
        <image class="icon y-margin-right-sm" :src="imageUrlone+'/nurseInformation/praise.svg'" mode=""></image>
        <text class="y-color-yellow y-margin-right">{{info.praise||0}}</text>
        <image class="icon y-margin-right-sm" :src="imageUrlone+'/nurseInformation/belittle.svg'" mode=""></image>
        <text class="y-color-detail">{{info.tread||0}}</text>
      </view>
      <image class="level-img" :src="`${imageUrlone}/nurseLevel/${level}.png`" mode=""></image>
    </view>
    <view class="y-margin-top" v-if="showCriminal">
      <view class="y-split y-margin-bottom" />
      <view class="y-bold y-text-align-center" v-if="info.criminalRecord === 0">无犯罪记录</view>
      <view class="y-text-align-center" v-if="info.criminalRecordUpdateTime">数据更新于{{ info.criminalRecordUpdateTime }}</view>
    </view>
  </view>
</template>

<script>
import util from '../../lib/util.js';
export default {
  props: { info: {}, choosed: false, withCriminal: false },
  data() {
    return {
      // choosed: false,
      isNurseInfoPage: true,
      imageUrlone:this.imageUrl
    };
  },
  computed: {
    level() {
      return Number(this.info.gradeCode) || 1;
    },
    showCriminal() {
      if (this.withCriminal === false) return false;
      return this.info.criminalRecord === 0 || this.info.criminalRecordUpdateTime;
    },
    workingYears() {
      const { workingYears } = this.info;
      return workingYears ? ` | ${workingYears}年服务经验` : '';
    },
    sex() {
      return this.info.sex ? '男' : '女';
    },
    avatar(){
      return this.info.employeePhoto||`${this.imageUrlone}/defaultHead.png`
    }
  },
  onShow() {
    this.isNurseInfoPage = util.getFullPagePath().startsWith('pages/zyph/nurseInformation/nurseInformation');
  },
  methods: {}
};
</script>

<style lang="scss">
.card {
  font-size: 32rpx;
  padding: 46rpx $spacing;
  align-items: flex-start;
  width: 690rpx;
  background-color: #ffffff;
  border-radius: 10rpx;
  margin: 20rpx auto;
}

.staff-card {
  box-shadow: 0px 7px 29px 0px rgba(153, 153, 153, 0.09);
}
.choosed {
  box-shadow: 0 0 0 2px $color-primary;
  background-color: #f4fcfc;
  position: relative;
  $height: 40rpx;
  &::after,
  &::before {
    content: ' ';
    position: absolute;
    width: $height;
    height: $height;
    bottom: 0;
    right: 0;
  }
  &::after {
    // background-image: url(imageUrlone/nurseList/choosed.png);
    background-image: url('');
    background-repeat: no-repeat;
    background-size: $height $height;
  }
  &::before {
    border: 34rpx solid $color-primary;
    width: 0;
    height: 0;
    border-top: 34rpx solid transparent;
    border-left: 34rpx solid transparent;
  }
}
.staff-icon {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  overflow: hidden;
  .image{
    width: 100%;
  }
}
.icon {
  width: 30rpx;
  height: 30rpx;
}
.level-img {
  width: 140rpx;
  height: 44rpx;
  margin-right: -$spacing;
}
</style>
